/**
 * @title 资产类别盈亏
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { SecondHeaderC, XYAxisChartsC } from '../../../../../comps';

class AssetProitAndLoss extends PureComponent {
  state = {
    bottom: [],
    top: [],
    series: undefined,
    xAxis: undefined,
    loading: false,
  };

  componentDidMount() {
    const { searchData } = this.props;
    if (searchData.portfolioCode) {
      this.getData({
        ...searchData,
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.setState({
        top: [],
        bottom: [],
      });
      this.getData({
        ...nextProps.searchData,
      });
    }
  }
  // 查询数据
  getData = (_data) => {
    const that = this;
    that.setState({
      loading: true,
    });
    that.props.dispatch({
      type: 'profitAndLossAnalysisM/getEchartDate2',
      payload: {
        ..._data,
      },
      callback: (res) => {
        that.setState({
          loading: false,
        });
        const data = res.data || {};
        data.xAxis && data.xAxis.length
          ? that.setState({
              xAxis: data.xAxis,
              series: [data.series[2]],
            })
          : that.setState({
              xAxis: [],
              series: [],
            });
      },
    });
  };

  changexAxis = (e) => {
    let arr = [];
    if (e && e.length) {
      e.map((item) => {
        arr.push(item.value);
      });
    }
    return arr;
  };

  render() {
    const { xAxis, series, loading } = this.state;
    const { colorType } = this.props;
    const downName = this.changexAxis(xAxis);

    return (
      <div style={{ width: '100%' }}>
        <SecondHeaderC title='资产类别盈亏' colorType={colorType} />
        <Spin spinning={loading}>
          <XYAxisChartsC
            series={series}
            xAxis={downName}
            height={378}
            gridLeft={90}
            gridRight={20}
            debtAndProfit={true}
            yAxisUnit={['单位(万元)']}
            type='bar'
            colorType={colorType}
          />
        </Spin>
      </div>
    );
  }
}

export default connect(({ profitAndLossAnalysisM }) => ({
  profitAndLossAnalysisM,
}))(AssetProitAndLoss);
